<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html style="height:100%">
    <head>
        <title>角色管理</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="../resource/js/easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="../resource/js/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="../resource/js/easyui/themes/color.css">


        <script src="../resource/js/easyui/jquery.min.js" type="text/javascript"></script>
        <script src="../resource/js/easyui/jquery.easyui.min.js" type="text/javascript"></script>
        <!-- <script src="../resource/js/easyui/easyloader.js" type="text/javascript"></script>-->   
        <script src="../resource/js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
        <script src="../resource/js/jquery.cookie.js" type="text/javascript"></script>
        <script src="../resource/js/auth.js" type="text/javascript"></script>
        <script src="../resource/js/common.js" type="text/javascript"></script>
        <style type="text/css">
            #fm{
                margin:0;
                padding:10px 30px;
            }
            .ftitle{
                font-size:14px;
                font-weight:bold;
                padding:5px 0;
                margin-bottom:10px;
                border-bottom:1px solid #ccc;
            }
            .fitem{
                margin-bottom:5px;
            }
            .fitem label{
                display:inline-block;
                width:80px;
            }
            .fitem input{
                width:160px;
            }
        </style>

        <script type="text/javascript" >

            /*
             查询函数
             */
            function  query() {


                var params = "";




                var name = $('#qname').textbox("getValue");
                if (name && name !== "") {
                    params += '&name=' + name;
                }






                var code = $('#qcode').textbox("getValue");
                if (code && code !== "") {
                    params += '&code=' + code;
                }






                var describ = $('#qdescrib').textbox("getValue");
                if (describ && describ !== "") {
                    params += '&describ=' + describ;
                }






                var parent = $('#qparent').combobox("getValue");
                if (parent && parent !== "") {
                    params += '&parent.id=' + parent;
                }






                var resources = $('#qresources').combobox("getValue");
                if (resources && resources !== "") {
                    params += '&resources[0].id=' + resources;
                }





                $('#dg').datagrid({url: '../api/sysRole?id=' + params, method: 'get'});

                $('#dg').datagrid('reload');
            }



            function newSysRole() {

                $('#dlg').dialog('open').dialog('setTitle', '新建角色');
                $('#fm').form('clear');

                url = '../api/sysRole';
                
                //初始父级组的内容
                    $.get('../api/sysGroup/all', function (data) {
                            $('#parent').combotree('loadData', convertToTree(data,null));
                           
                    });

                var url2 = null;
                    if (c === 'admin') {
                        url2 = '../api/resource/all';
                    } else {
                        url2 = '../api/resource2?loginId=' + c;
                    }
                    $('#resources1').tree({
                        method: "get",
                        url: url2,
                        loadFilter: function (data) {
                            return convertToTree(data, null);
                        }

                    });

                    
                
            }

            function saveSysRole() {
                 $('#resources').empty();
                   var nodes = $('#resources1').tree("getChecked",['checked','indeterminate']);//得到所有当前已选中的栉点
                $.get('../api/resource/all', function (data) {
                   
                    //提交前根据资源树选中的节点，生成资源的隐藏表单，最终提交的数据同这些隐藏表单负责
                   
                    for (var i = 0; i < data.length; i++) {
                        var tt;
                        var id = data[i].id;
                        var name = data[i].name;
                        for (var j = 0; j < nodes.length; j++) {

                            if (nodes[j] && nodes[j].id === id) {
                                tt = "checked";
                                break;
                            } else {
                                tt = "";
                            }
                        }

                        $('#resources').append("<label><input  type='checkbox' " + tt + "  name='resources[" + i + "].id' value='" + id + "'/>"+name+"</label>");

                    }
                    // 提交
                    $('#fm').form('submit', {
                    url: url,
                    method: 'post',
                    onSubmit: function () {
                        return $(this).form('validate');
                    },
                    success: function (result) {
                        var result = eval('(' + result + ')');
                        if (!result.success) {
                            $.messager.show({
                                title: '出错',
                                msg: result.msg
                            });
                        } else {
                            $('#dlg').dialog('close');        // close the dialog
                            $('#dg').datagrid('reload');    // reload the user data
                        }
                    }
                });

                });






            }

            function editSysRole() {

                var row = $('#dg').datagrid('getSelected');
                if (row) {
                    $('#dlg').dialog('open').dialog('setTitle', '编辑角色');
                    $('#fm').form('load', row);
                    url = '../api/sysRole/' + row.id + '?_method=PUT';
                   //初始父级组的内容
                    $.get('../api/sysGroup/all', function (data) {
                            $('#parent').combotree('loadData', convertToTree(data,null));
                            if(row.parent){
                                $('#parent').combotree('setValue', row.parent.id);
                            }else{
                                $('#parent').combotree('setValue', null);
                            }
                            
                    });
                    
                

                    /*      $.get('../api/resource/all',function(data){
                     $('#resources').empty();
                     for(var i=0;i<data.length;i++){
                     var id = data[i].id;
                     var name = data[i].name;
                     
                     var tt;
                     for(var j=0;j<row.resources.length;j++){
                     if(row.resources[j] && row.resources[j].id ===id){
                     tt="checked";
                     break;
                     }else {
                     tt = "";
                     }
                     }
                     $('#resources').append("<label><input type='checkbox'"+tt+" name='resources["+i+"].id' value='"+id+"'/>"+name+"</label>");
                     }
                     });
                     */

                    var url2 = null;
                    if (c === 'admin') {
                        url2 = '../api/resource/all';
                    } else {
                        url2 = '../api/resource2?loginId=' + c;
                    }
                    $('#resources1').tree({
                        method: "get",
                        url: url2,
                        loadFilter: function (data) {
                            return convertToTree(data, null);
                        }

                    });

                    //让有权限访问 的资源节点被选中
                    $.get('../api/resource/all', function (data) {

                        for (var i = 0; i < data.length; i++) {
                            var id = data[i].id;
                            var name = data[i].name;

                            var tt;
                            for (var j = 0; j < row.resources.length; j++) {
                                if (row.resources[j] && row.resources[j].id === id) {
                                    var node = $('#resources1').tree("find", id);
                                    $('#resources1').tree("check", node.target);
                                    break;
                                }
                            }

                        }
                    });


                }
            }

            function destroySysRole() {
                var row = $('#dg').datagrid('getSelected');
                if (row) {


                    $.messager.confirm('确认提示', '你确定要删除此角色吗?', function (r) {
                        if (r) {
                            $.post('../api/sysRole/' + row.id, {'_method': 'DELETE'}, function (result) {
                                if (result.success) {
                                    $('#dg').datagrid('reload');    // reload the user data
                                } else {
                                    $.messager.show({// show error message
                                        title: '删除失败',
                                        msg: result.msg,
                                        icon: 'error'
                                    });
                                }
                            }, 'json');
                        }
                    });
                }
            }










            function  formatParent(value, rec) {

                if (rec.parent) {
                    return rec.parent.name;
                }


            }



            function  formatResources(value, rec) {

                if (rec.resources && rec.resources.length > 0) {

                    var str = "";
                    for (var i = 0; i < rec.resources.length; i++) {

                        str += rec.resources[i].name + ",";

                    }
                    return str.substr(0, str.length - 1);
                }


            }





        </script>
    </head>
    <body style="height:100%">

        <table id="dg" title="角色信息" class="easyui-datagrid" style="width:100%;height:100%"
               url="../api/sysRole" method="get"
               toolbar="#toolbar"  pagination="true" 
               rownumbers="true" fitColumns="true" singleSelect="true">
            <thead>
                <tr>
                    <th field="id" width="50" hidden="true">ID</th>
                    <th field="name" width="30" data-options="sortable:true"> 名称</th> 
                    <th field="code" width="30" data-options="sortable:true"> 编码</th> 
                    <th field="describ" width="30" data-options="sortable:true"> 描述</th> 
                    <th field="parent" width="100" data-options="sortable:true, formatter:formatParent"> 父级组</th>
                    <th field="resources" width="100" data-options="sortable:true, formatter:formatResources"> 可访问资源</th>


                </tr>
            </thead>
        </table>

        <div id="toolbar">
            <!--  查询条件选择区 -->




            <label>名称:</label> 

            <input  id="qname" name="name" class="easyui-textbox"    style="width:80px;">


            <label>编码:</label> 

            <input  id="qcode" name="code" class="easyui-textbox"    style="width:80px;">


            <label>描述:</label> 

            <input  id="qdescrib" name="describ" class="easyui-textbox"    style="width:80px;">


            <label>父级组:</label> 


            <input  id="qparent" name="parent.id" class="easyui-combobox"    style="width:80px;" data-options="
                    url:'../api/sysGroup/all',
                    method:'get',
                    panelHeight:'auto',        
                    valueField: 'id',
                    textField: 'name',

                    ">


            <label>可访问资源:</label> 


            <input  id="qresources" name="resources.id" class="easyui-combobox"    style="width:80px;" data-options="
                    url:'../api/resource/all',
                    method:'get',
                    panelHeight:'auto',        
                    valueField: 'id',
                    textField: 'name',

                    ">







            <a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="query()">查询</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newSysRole()">新建</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editSysRole()">编辑</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroySysRole()">删除</a>
        </div>

        <!--  编辑 对话框 -->      
        <div id="dlg" class="easyui-dialog" style="width:700px;height:450px;padding:10px 20px"
             closed="true" buttons="#dlg-buttons">
            <div class="ftitle">角色信息编辑</div>
            <form id="fm" method="post">




                <div class="fitem" style="float:left">
                    <label>名称:</label>
                    <input name="name" class="easyui-textbox" >
                </div>


                <div class="fitem" style="float:right">
                    <label>编码:</label>
                    <input name="code" class="easyui-textbox" >
                </div>


                <div class="fitem" style="float:left">
                    <label>描述:</label>
                    <input name="describ" class="easyui-textbox" >
                </div>


                <div class="fitem" style="float:right">
                    <label>父级组:</label> 
                    <input  id="parent" name="parent.id" class="easyui-combotree"  class="fitem"   >
                </div>


                <div  class="fitem"  style="float:left">
                    <label>可访问资源:</label>
                    <div  id="resources"     style="display:none"></div>
                    <div  style="width:600px;height:200px;overflow-y:scroll">
                        <ul class="easyui-tree" id="resources1" data-options="lines:true,checkbox:true,cascadeCheck:false">

                        </ul>
                    </div>
                </div>




            </form>
        </div>
        <div id="dlg-buttons">
            <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveSysRole()">保存</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
        </div>



    </body>
</html>
